<template>
	<el-main>
		<el-row>
			<el-col :md="10">
				<el-input v-model="value">
					<el-button
						slot="append"
						class="copyValue" 
						:data-clipboard-text="value" 
						@click="copyValue">
						复制
					</el-button>
				</el-input>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	import Clipboard from 'clipboard'
	export default {
		name: 'Clipboard',
		data() {
			return {
				clipboard: null,
				value: 'http://www.baidu.com'
			}
		},
		mounted() {
			this.clipboard = new Clipboard(".copyValue");
		},
		destroyed() {
			this.clipboard.destroy();
		},
		methods: {
			// 复制内容
			copyValue() {
				let _this = this;
				_this.clipboard.on('success', function () {
					_this.$message({
						message: '复制成功',
						type: 'success'
					});
					_this.clipboard.destroy();
					_this.clipboard = new Clipboard('.copyValue');
				});
			}
		}
	}
</script>
